<template>
	<!-- 基本信息 -->
	<view class="essentialInformation">
		<view class="header">
			<view class="header-h2">
				设置您的基本信息
			</view>
			<view class="header-text">
				资料设置后无法修改
			</view>
		</view>
		<view class="info">
			<view class="height">
				<view class="det">
					本人身高(cm)
				</view>
				<view class="choiceHeight">
				<input type="number" v-model="height" value="" placeholder="请输入身高" />
					</view>
			<!-- 	<picker :range="heightData" :value="height" @change="choiceHeight">
					<view class="choiceHeight">
						<view class="">
						
							{{height!=""?height:'请选择本人身高'}}
						</view>
						
						<u-icon name="arrow-right" color="#666" size="20"></u-icon>
					</view>
				</picker> -->
				<!-- <view v-show="b"> 
					<view class="choiceHeight">
						<view class="">
							{{height!=""?height:'请选择本人身高'}}
						</view>
					</view>
				</view> -->
			</view>
			<view class="height">
				<view class="det">
					本人性别
				</view>
				<picker :range="sexData" :value="sex" @change="choiceSex" v-show="s">
					<view class="choiceHeight">
						<view class="">
							{{sex!==""?sex:'请选择性别'}}
							
						</view>
						<u-icon name="arrow-right" color="#666" size="20"></u-icon>
					</view>
				</picker>
				<!-- <view v-show="b">
					<view class="choiceHeight">
						<view class="">
						{{sersex}}
						</view>
					</view>
				</view> -->
			</view>
			<view class="height" style="margin-top: 40rpx;">
				<view class="det">
					年龄
				</view>
				<view class="choiceHeight">
			<input type="number" v-model='age' placeholder="请输入年龄">
				</view>
			<!-- 	<picker mode="date" fields="day" @change="choicebirthday" v-show="s">
					<view class="choiceHeight">
						<view class="">
							{{birthday!=""?birthday:'请选择出生年月'}}
						</view>
						<u-icon name="arrow-right" color="#666" size="20"></u-icon>
					</view>
				</picker> -->
				<!-- <view v-show="b">
					<view class="choiceHeight">
						<view class="">
							{{birthday!=""?birthday:'请选择出生年月'}}
						</view>
					</view>
				</view> -->
			</view>
		<!-- 	<view class="height" style="margin-top: 40rpx;">
				<view class="det">
					从业时间
				</view>
				<picker mode="date" fields="day" @change="choiceworkTime" v-show="s">
					<view class="choiceHeight">
						<view class="">
							{{working_seniority!=""?working_seniority:'请选择从业时间'}}
						</view>
						<u-icon name="arrow-right" color="#666" size="20"></u-icon>
					</view>
				</picker>

			</view> -->
			<view class="personalProfile">
				<view class="det">
					个人标签
				</view>
				<view class="tages">
					<view :class="(item.state?'tages-boxplus':'tages-box')" v-for="(item,index) in tips" :key="index" @click="selecttage(item)" >
						<text>{{item.name}}</text>
					</view>
				</view>
				<!-- :disabled='true' -->
				<textarea class="textarea"  v-model="personalProfile" placeholder="选择您的标签" style="height:224rpx;" />
			</view>

		</view>
		<!-- 提交 -->
		<view class="submit"  @click="setInfo"><view class="">提交</view></view>
		
	</view>
</template>

<script>
	import {
		getUserInfo,setInformation
	} from "./api.js"
	export default {
		data() {
			
			return {
				age:'',
				zt: null, //状态
				working_seniority: "", //从业时间
				height: "", //身高
				sex:'',
				personalProfile: "",
				birthday: "",
				b:true,
				s:true,
				sersex:'',
				tages:[],
				tabs:false,
				tips:[],
				tageSum:0
			}
		},
		computed: {
			heightData() {
				let newHeightData = []
				for (let i = 0; i <200; i++) {
					newHeightData.push(String( i))
				}
				return newHeightData
			},
			sexData() {
				let newsexData = ['男','女']
				return newsexData
			}
		},
		onLoad() {
			this.initialize()
			this.getTags()
			
		},
		methods: {
			// 初始化页面信息
			initialize(){
				let obj = {
					openid: this.$db.get('token')
				}
				this.$db.http('technician/detail',obj).then(res => {
					if(res.code==200){
						console.log(res,'初始化');
						let data = res.data
						// if(data.fill_detail_status){
							// this.b = true
							// this.s = false
							this.height = data.height
							// this.birthday = data.birthday
							// this.working_seniority = data.working_seniority
							this.personalProfile = data.intro
							this.zt = data.status
							this.sex = data.sex
							this.age = data.age
						// }
						
					}
				})
			},
			selecttage(item){
				this.tageSum++
				if(this.tageSum >= 6){
					return false
				}
				if(item.state == true){
					return false
				}
				item.state = true
				console.log(item)
				if(!this.personalProfile){
					this.personalProfile=item.name
					return
				}
				this.personalProfile=this.personalProfile+' 、'+item.name
				
			},
			getTags(){
				// this.tages[0].name = 111
				this.$db.http('api/sys/tags').then(res=>{
					this.tages =res.data
					for(let i=0;i<this.tages.length;i++){
						this.tips.push({name:'',state:false})
						this.tips[i].name = this.tages[i]
					}
					console.log(this.tips,'-------')
				})
			},
			// 选择身高
			choiceHeight(e) {
				console.log(e,'---**');
				//通过e.detail.value获取值，获取的是自定义数据的下标
				this.height = e.detail.value
			},
			// 选择性别
			choiceSex(e) {
				//通过e.detail.value获取值，获取的是自定义数据的下标
				this.sex = e.detail.value
				if(this.sex == 0){
					this.sex = '男'
				}else if(this.sex == 1){
					this.sex = '女'
				}
				
			},
			// 选择从业时间
			choiceworkTime(e) {
				//通过e.detail.value获取值，获取的是自定义数据的下标
				this.working_seniority = e.detail.value
			},
			//出生年月
			choicebirthday(e) {
				this.birthday = e.detail.value
			},
			//设置基本信息
			setInfo() {
				if(this.height === ''){ uni.showToast({title:'请选择身高',icon:'none'}); return}
				if(this.sex === ''){ uni.showToast({title:'请选择性别',icon:'none'}); return}
				// if(this.birthday === ''){ uni.showToast({title:'请选择出身时间',icon:'none'}); return}
				// if(this.working_seniority === ''){ uni.showToast({title:'请选择从业时间',icon:'none'}); return}
				if(this.personalProfile === ''){ uni.showToast({title:'请简单描述一下',icon:'none'}); return}
				if(this.sex==0){this.sex='男'}
				if(this.sex==1){this.sex='女'}
				
				// working_seniority: this.working_seniority
				let obj = {
					height: this.height,
					sex: this.sex,
					age: this.age,
					intro: this.personalProfile,
					
				}
				setInformation(obj).then(res => {
					uni.showToast({title: res.msg,icon: "none"})
					setTimeout(() => {
						uni.navigateBack()
						// uni.navigateTo({
						// 	url: "../personalInformation/personalInformation"
						// })
					}, 700)
				})
			}
		}
	}
</script>

<style lang="less">
	page{background:#fff;}
	.essentialInformation {
		width: 100%;
		height: 200rpx;
		background: #0ea17d;

		.header {
			color: #FFFFFF;
			border: 1rpx solid #0ea17d;

			.header-h2 {
				margin-top: 48rpx;
				font-size: 40rpx;
				font-weight: bold;

				margin-left: 32rpx;
			}

			.header-text {
				margin-top: 8rpx;
				margin-left: 32rpx;
				font-size: 28rpx;
				font-weight: 400;
			}

		}

		.info {
			position: relative;
			box-sizing: border-box;
			padding: 0 32rpx;
			width: 750rpx;
			border-radius: 40rpx 40rpx 0px 0px;
			margin-top: 27rpx;
			background: #fff;
			border-top: 1rpx solid #fff;
			padding-bottom:60rpx;
			.height {
				.det {
					margin: 32rpx 0 16rpx 0;
					font-size: 32rpx;
					font-weight: bold;
				}

				.choiceHeight {
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 96rpx;
					line-height: 96rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					background: #F7F8F9;
					border-radius: 16rpx;
					padding: 0 16rpx 0 28rpx;
				}
			}

			.personalProfile {
				width: 100%;

				.det {
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
					margin-top: 40rpx;
					margin-bottom: 16rpx;
				}

				.textarea {
					box-sizing: border-box;
					padding: 28rpx;
					width: 686rpx;
					height: 360rpx;
					background: #F7F8F9;
					border-radius: 16rpx;
				}
			}

		}

		.submit {
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;

			view {
				width: 685rpx;
				height: 88rpx;
				background: #0ea17d;
				border-radius: 50rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.tages{
			width: 100%;
			min-height: 50rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-wrap: wrap;
			.tages-box{
				padding: 0 20rpx;
				background-color: #eeeeee;
				height: 50rpx;
				margin-right: 10rpx;
				margin-top: 10rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
			}
			.tages-boxplus{
				padding: 0 20rpx;
				background-color: #ee9b5f;
				color: white;
				height: 50rpx;
				margin-right: 10rpx;
				margin-top: 10rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
			}
		}
	}
	.sky{
		background-color: pink;
	}
</style>
